<template>
	<view class="setup u-skeleton">
		<u-navbar title="设置" :background="{
			'backgroundColor':'#fff'
		}" :borderBottom="false" class="u-skeleton-rect"></u-navbar>
		<view class="box u-skeleton-rect">
			<view class="item avatar" @click="$util.redirectTo('/pages/my/nickname')">
				<view class="left">头像</view>
				<view class="right" v-if="info">
					<u-avatar :src="$util.img(info.avatar)"></u-avatar>
				</view>
			</view>
			<view class="item" @click="$util.redirectTo('/pages/my/nickname')">
				<view class="left">昵称</view>
				<view class="right">
					<text>{{info.nickname}}</text>
					<u-icon name="arrow-right" size="28" color='rgba(0,0,0,.6)'></u-icon>
				</view>
			</view>
			<view class="item">
				<view class="left">手机号</view>
				<view class="right">
					<text>{{info.mobile}}</text>
				</view>
			</view>
			<view class="item" @click="$util.redirectTo('/pages/my/operate')">
				<view class="left">操作密码</view>
				<view class="right">
					<text></text>
					<u-icon name="arrow-right" size="28" color='rgba(0,0,0,.6)'></u-icon>
				</view>
			</view>
			<view class="item" @click="$util.redirectTo('/pages/my/setpassword')">
				<view class="left">修改密码</view>
				<view class="right">
					<text></text>
					<u-icon name="arrow-right" size="28" color='rgba(0,0,0,.6)'></u-icon>
				</view>
			</view>
			<view class="item" @click="$util.redirectTo('/pages/my/cancelAccount')">
				<view class="left">注销账号</view>
				<view class="right">
					<text></text>
					<u-icon name="arrow-right" size="28" color='rgba(0,0,0,.6)'></u-icon>
				</view>
			</view>
		</view>
		<u-button class="btn-primary u-skeleton-rect" ripple-bg-color="rgba(0,0,0,.4)" @click="exit"
			:ripple="true">退出账号</u-button>
		<u-skeleton :loading="loding" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loding: true,
				//用户数据
				info:''
			}
		},
		onShow() {
			//获取用户数据
			this.getinfo();
		},
		methods: {
			//获取当前个人数据
			getinfo(){
				this.$http.asyncSendrequest({
					url:'/profile/userInfo',
					success:res=>{
						this.info = res.data;
						this.loding = false;
					}
				})
			},
			//退出登录
			exit() {
				uni.clearStorage();
				this.$util.taost({
					title: '退出成功',
					callback: res => {
						this.$util.redirectTo('/pages/login/login')
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.setup {
		.box {
			background: #fff;

			.item {
				margin: 0 30rpx;
				border-bottom: 1rpx solid rgba(0, 0, 0, .1);
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx;
				box-sizing: border-box;

				.left {
					font-size: 28rpx;
				}

				.right {
					text{
						margin-right: 20rpx;
						color: #999;
					}
				}
			}

			.item:last-child {
				border: none;
			}

			.avatar {
				margin-top: 30rpx;
				padding: 20rpx 30rpx 20rpx;

				.right {}
			}
		}

		.btn-primary {
			height: 96rpx;
			background: #292929;
			border-radius: 10rpx;
			text-align: center;
			line-height: 96rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			color: #FFFFFF;
			margin: 116rpx 30rpx 0;
		}
	}
</style>